import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
// first
import UI_Router from './views/UI_Router.vue'
import Contacts from "./views/Contacts.vue"
import About from "./views/About.vue"
//second
import Alice from './components/Alice.vue'
import Bob from './components/Bob.vue'
import All_Contacts from './components/All_Contacts.vue'
//third
import Blog from "./components/child/Blog.vue"
import Fax from "./components/child/Fax.vue"
// 创建路由对象 传入规则

const routes = [{
    path: '/ui_routers',
    component: UI_Router
  },
  {
    path: '/contacts',
    component: Contacts,
    children: [{
        path: 'alice',
        component: Alice
      },
      {
        path: 'bob',
        component: Bob,
        children: [{
          path: 'blog',
          component: Blog
        }, {
          path: 'fax',
          component: Fax
        }]
      },
      {
        path: 'all_contacts',
        component: All_Contacts
      }
    ]
  },
  {
    path: '/about',
    component: About
  }
];
Vue.config.productionTip = false;
Vue.use(VueRouter);
const router = new VueRouter({
  routes
});
new Vue({
  render: h => h(App),
  router
}).$mount('#app');